<!DOCTYPE html>
<html>
<head>
    <title>攻略系列</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>


    <script>
        $(function () {
            var strategyId = getParams().id;
            if (strategyId) {
                $.get('/strategies/' + strategyId, function (data) {
                    $('.strategies').renderValues(data)
                });

                //获取攻略对应的游记
                $.get('/strategies/' + strategyId + "/travels", function (data) {
                    $('.hot').renderValues({list: data}, {
                        setHref: function (item, value) {
                            var href = $(item).data('href') + value;
                            $(item).attr('href', href);
                        }
                    });
                });
                var index = 0;
                // 获取攻略下的攻略分类
                $.get('/strategies/' + strategyId + "/catalogs", function (data) {
                    $('.catalogs').renderValues({list: data}, {
                        setName: function (item, value) {
                            if (index < 10) {
                                $(item).html("0" + index + "/" + value);
                            } else {
                                $(item).html(index + "/" + value);
                            }
                            index++;
                        },
                        setHref: function (item, value) {
                            var href = $(item).data('href') + value;
                            $(item).attr('href', href);
                        }
                    });
                }),
                    // 发送请求获取当前攻略所有的标签
                    /**
                     * 接口分析:
                     * 1.确定资源: /strategies/strategyId/tags}
                     * 2.请求方式:GET
                     * 3.请求参数:strategyId
                     * 4.返回结果:List<Tag> tags JSON
                     */
                    $.get('/strategies/' + strategyId + '/tags', function (data) {
                        // H5静态页面使用jrender迭代渲染
                        $('.tag').renderValues({list: data});
                    })
                // 发送ajax请求获取所有骡友对当前攻略点评(审核通过)
                /**
                 * 接口分析:
                 * 1.确定资源: /strategyComments/{strategyId}/1}
                 * 2.请求方式:GET
                 * 3.请求参数:state
                 * 4.返回结果:List<strategyComment> strategyComments JSON
                 */
                $.get('/strategyComments/' + strategyId + '/1', function (data) {
                    console.log(data);
                    // 使用jrender渲染
                    $('#comment').renderValues({list: data}, {
                        'getStar': function (item, value) {
                            var starhtml = '';
                            var unStarhtml = '';
                            var value = parseInt(value);
                            for (var i = 0; i < value; i++) {
                                starhtml += '<i class="fa fa-star"></i>';
                            }
                            for (var i = 0; i < 5 - value; i++) {
                                unStarhtml += '<i class="fa fa-star-o"></i>';
                            }

                            $(item).html(starhtml + unStarhtml);
                        },
                        /*'getContent':function(item,value) {
                            if(value.length>60){
                                value = value.substring(0,60)+"...";
                            }
                            $(item).html(value);
                        }*/

                    });
                    // 点击点评按钮跳到点评页面,需求:将当期攻略的id带过去
                    $("#commentBtn").click(function () {
                        window.location.href = "/mine/strategyComment.html?strategyId=" + strategyId;
                    })
                });
            }
            //查询收藏该攻略的数量====================周文才==============================================
            $.get("/collects/strategyCount", {strategyId: strategyId}, function (data) {
                $('#strategyCount').html(data);
            })
            //收藏操作=======================================================================
            var user = JSON.parse(sessionStorage.getItem("user"));
            $('#collectBtn').click(function () {
                //判断是否是用户登录
                if (!user) {
                    window.location.href = "/login.html";
                } else {
                    if ($("#collectBtn").data('status') == 0) {
                        $("#collectBtn").data('status', 1);
                        $.ajax({
                            type: "POST",
                            url: "/collects/strategys",
                            data: {userId: user.id, strategyId: strategyId, status: 1},
                            dataType: 'json',
                            async: false,
                            success: function (data) {
                                if (data.success) {
                                    $(document).dialog({
                                        overlayClose: true,
                                        content: '收藏成功'
                                    });
                                }
                            }
                        })
                        $('.plus').remove();
                        $('.fa-heart').append('<span class="plus" background:#000>+1</span>');
                        $('.plus').fadeOut(1000);
                        $.get("/collects/strategyCount", {strategyId: strategyId}, function (data) {
                            $('#strategyCount').html(data);
                        })
                    } else if ($("#collectBtn").data('status') == 1) {
                        $("#collectBtn").data('status', 0);
                        $.ajax({
                            url: '/collects/strategys',
                            type: 'DELETE',
                            data: {userId: user.id, strategyId: strategyId, status: 0},
                            dataType: 'json',
                            async: false,
                            success: function (data) {
                                $(document).dialog({
                                    overlayClose: true,
                                    content: '取消收藏成功'
                                });
                            }
                        })
                        $.get("/collects/strategyCount", {strategyId: strategyId}, function (data) {
                            $('#strategyCount').html(data);
                        })
                        $('.plus').remove();
                        $('.fa-heart').append('<span class="plus" background:#000>-1</span>');
                        $('.plus').fadeOut(1000);
                    }
                }
            })
            //收藏回显操作=============================================================================
            if (user) {
                $.get("/collects/strategy",{userId:user.id,strategyId:strategyId},function (data) {
                    $('#collectBtn').data("status",data);
                })
            }
            //end===============================================================================
            // ==================================刘涛===============================================
            // 用于开发攻略点赞
            // 获取当前攻略点赞数
            $.get('/strategies/'+strategyId+'/num',function (data) {
                console.log(data);
                //将点赞数设置到网页上
                $('#likeNum').html(data);
            })
            $('.likeBtn').click(function () {
                // 发送ajax请求判断当前用户是否登录
                $.get('/strategies/isLogin',function (data) {
                    if (data.state==1) {
                        // 进行点赞逻辑开发
                        $.ajax({
                            url:'/strategies/like',
                            type:'post',
                            data:{strategyId:strategyId},
                            success:function (data) {
                                //将点赞数设置到网页上
                                $('#likeNum').html(data);
                            }
                        })

                    }else{
                        // 跳转到登录页面
                        window.parent.location.href='/login.html';
                    }
                })
            })
            // ===============end================
            // ==========页面控制=============
            // 点击骡友点评
            $('#pills-comment-tab').click(function () {
                // 将攻略目录隐藏
                $('#allPeopleWatch').css('display','none');
                $('#pills-comment').css('display','');


            })
            // 点击攻略目录
            $('#pills-catalog-tab').click(function () {
                // 将骡友点评隐藏
                $('#pills-comment').css('display','none');
                $('#allPeopleWatch').css('display','');
            })
        });
    </script>
</head>

<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略">
            </div>
        </div>
    </div>
</div>

<div class="container strategies">
    <h5 class="title" render-html="title">广州攻略</h5>
    <small><span>0</span>人阅读过此攻略</small>
    <div class="focus">
        <i class="fa fa-heart" id="collectBtn" data-status="0"><span id="strategyCount"> 0</span> 收藏</i>
        <i class="fa fa-thumbs-up likeBtn"><span id="likeNum"> </span > 点赞</i>
        <button class="btn">想去</button>
        <button class="btn">去过</button>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>攻略目录</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>骡友点评</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div id="allPeopleWatch" >
            <div class="container hot">
                <h6>大家都在看</h6>
                <div render-loop="list">
                    <a data-href="/travelContent.html?id=" render-fun="setHref" render-key="list.id">
                        <button class="btn" render-html="list.title"></button>
                    </a>
                </div>
            </div>
            <div class="catalogs">
                <div render-loop="list">
                    <div class="container detail">
                        <h6 render-fun="setName" render-key="list.name"></h6>
                        <div render-loop="list.details">
                            <a data-href="/strategyDetails.html?id=" render-fun="setHref" render-key="list.details.id">
                                <button class="btn" render-html="list.details.title"></button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--骡友点评模块-->
        <div class="tab-pane fade " id="pills-comment">

            <div class="container tag">
                <h6>骡友标签</h6>
                <div render-loop="list">
                    <span render-html="list.name"></span>
                </div>
            </div>
            <hr>

            <div id="comment">
                <div render-loop="list">
                    <div class="container row comment">
                        <div class="col-2 comment-head">
                            <a data-href="userProfiles.html?id=">
                                <img class="rounded-circle" render-src="list.user.headImgUrl">
                            </a>
                        </div>
                        <div class="col comment-right">
                            <p class="authorName"><span render-html="list.user.nickName"></span></p>
                            <span class="comment-star" render-fun="getStar" render-key="list.starNum">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </span>
                            <span class="comment-date" render-html="list.commendTime"></span>
                            <div class="comment-content">
                                <a data-href="strategyComment.html" data-id="list.id">
                                    <p render-html="list.content" render-fun="getContent" render-key="list.content"></p>
                                </a>
                            </div>

                            <ul class="comment-img">
                                <li>
                                    <img render-src="list.imgUrls">
                                </li>
                            </ul>

                            <div class="d-flex icon">
                                <a href="strategyComment.html">
                                    <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                                    <i class="fa fa-thumbs-o-up"> <span></span> </i>
                                </a>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<div class="operation">
    <button class="btn">加入旅行单</button>
    <button class="btn" id="commentBtn">点评</button>
</div>


</body>
</html>